<template>
   
    <div
    class="explore-scroll-container">
    <!-- <div v-for="item in items" :key="item.id" class="item"> -->

        <div  style="width: 1240px;
        max-width: 1240px;
        min-width: 720px;display: flex;flex-wrap: wrap;gap: 10px;justify-content: center;">
            <div  v-for="item,index in list" :key="item.id" style="width: 240px;" @click="openDetail(item)">
                <!-- <div  style="width: 240px;"   @click="openDetail(item)" >  -->
                    <img :src="item.image" class="Guid-image"/>
                    <p class="title">{{item.title}}</p>
                    <el-rate
                      v-model="item.score"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template=""
                    />
                    <p class="tips">{{item.days}} days {{item.nights}} nights , {{item.places}} places to visit </p>
                <!-- </div> -->
            </div>

          </div>

    <!-- </div> -->
    <div v-if="loading" class="loading">
      <el-spinner />
      Loding...
    </div>
  </div>
   
   
  </template>
  <script setup>
    import { ref, watch, onMounted, computed  } from 'vue';
    import { getGuid } from '@/api/index';
    import { useRouter, useRoute } from 'vue-router';
       import { getUser } from '@/utils/auth';
       import cache from "@/plugins/cache";
       const route = useRoute();
       const user = getUser()
const routers =useRouter();
    const always = ref(true)
    const group = ref([])
    // 接收父组件传递的查询参数
    const props = defineProps({
      queryParam: {
        type: Object,
        required: true
      }
    });
    
    // 响应式变量
    const list = ref([]);
    
    // 获取数据列表
    function getList() {

      const query = {
        page : props.queryParam.page,
        size : props.queryParam.size,
        categorieList : (props.queryParam.categories && props.queryParam.categories.length>0)?props.queryParam.categories.join(","):null,
        where : props.queryParam.where?props.queryParam.where:"",
        region : props.queryParam.region?props.queryParam.region:"",
        title : props.queryParam.title?props.queryParam.title:"",
        noMine: (user && user.email)?user.email:'0'
      }
      

      getGuid(query).then(res => {
        // console.log(res);
        list.value = res.content;  // 使用 list.value 来更新 list
        // 分成每10个元素一个子数组
        group.value = chunkArray(list.value, 10);
       console.log(group.value)
      }).catch(error => {
        console.error('Failed to fetch data:', error);
      });
    }
    
    // 观察 queryParam 的变化并重新获取数据
    watch(() => props.queryParam, () => {
      getList();
    }, { deep: true });
    
    // 组件挂载后获取数据
    onMounted(() => {
      getList();
    });

    function openDetail(item) {
      cache.session.setJSON('prePath',route.path)
      routers.push({
        path:'/stepTwo',
					query:{
            id:item.id
          }
				})
    }


    // 分块函数
function chunkArray(array, chunkSize) {
  const result = [];
  for (let i = 0; i < array.length; i += chunkSize) {
    result.push(array.slice(i, i + chunkSize));
  }
  return result;
}
    </script>
  <style scoped>
    .explore-scroll-container {
  overflow-y: auto;
  overflow-x: none;
  padding: 20px;
        width: 100%;
        justify-content: center;
        display: flex;
}

.item {
  padding: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.loading {
  text-align: center;
  padding: 10px;
}


  .el-carousel__container{
    height: 610px;
  }
    .groupitem{
      display: flex;
      justify-content: flex-start;
  
      
    }
  .scrollbar-flex-content {
    display: flex;
    
  }
  .scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-danger-light-9);
    color: var(--el-color-danger);
  }
  .Guid-image{
    width: 240px;
    height: 160px;
    border-radius: 10px;
  }
  .title{
    font-weight: 500;
    font-size: 24px;
    color: #000;
    margin-bottom: 0;
    text-overflow: ellipsis;  /* ellipsis:显示省略符号来代表被修剪的文本  string:使用给定的字符串来代表被修剪的文本*/ 
    white-space: nowrap;   /* nowrap:规定段落中的文本不进行换行   */ 
    overflow: hidden; /*超出部分隐藏*/
  }
  .tips{
    font-weight: 400;
font-size: 18.0439px;
line-height: 21px;
color: #5a5a5a;
  }
  .noneList{
    width: 100%;
    display: flex;
    justify-content: center;
    height: 150px;
    line-height: 100px;
    padding: 20px;
    margin-right: 10px;
    border-radius: 20px;
    background-color: #fafafa;
  }
  </style>
  